<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>商品列表</h1>
    <table>
        <thead>商品表
            <tr>
                <th>ID</th>
                <th>商品名</th>
                <th>价格</th>
                <th>库存</th>
                <th>描述</th>
            </tr>
        </thead>
        <tbody id="product-list">

        </tbody>
    </table>
</body>
<script>
    function refreshProductList(){
        fetch("/api/products")
        .then(products=>{
            const tbody = document.getElementById("product-list");
            tbody.innerHTML = "";
            products.forEach(product => {
                const row = document.createElement("tr")
                row.innerHTML = `
                    <td>${product.id}</td>
                    <td>${product.name}</td>
                    <td>${product.price}</td>
                    <td>${product.count}</td>
                    <td>${product.descr || '-'}</td>
                `;
                tbody.appendChild(row)
            });
        })
        .catch(errors=>{
            console.log(error)
            alert("商品获取失败",error)
        })
    }
</script>
</html>